<template>
  <div class="content">
  <!-- 搜索框 -->
    <div class="search_content">
      <div class="row">
        <div class="col">
          <Autocomplete_school_ui></Autocomplete_school_ui>
        </div>
        <div class="col">
          <Select_grade_ui></Select_grade_ui>
        </div>  
        <div class="col">
          <Select_class_ui></Select_class_ui>
        </div>  
        <div class="col">
          <Select_subject_ui></Select_subject_ui>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <Input_test_ui></Input_test_ui>
        </div>  
        <div class="col">
          <Input_tc_name_ui ></Input_tc_name_ui>
        </div>  
        <div class="col">
          <Input_st_name_ui ></Input_st_name_ui>
        </div>  
        <div class="col">
          <Select_sex_ui></Select_sex_ui>
        </div>  
      </div>
      <div class="row buttonsrow">
        <div class="col buttons">
          <el-button type="success" @click="reset" size="medium" >重置</el-button>
          <el-button type="primary" @click="submit" size="medium" >搜索</el-button>
        </div>
      </div>
    </div>
    <!-- 表格 -->
    <div class="table-content">
      <Table_table_ui>
        <template  slot="buttons">
          <el-button size="mini" type="primary" plain>离店</el-button>
          <el-button size="mini" type="success" plain >访客</el-button>
        </template>
      </Table_table_ui>
    </div>
    <!-- 分页 -->
    <Pagination_paging_ui getSeach="studentModule/table_st_seach"></Pagination_paging_ui>
  </div>
</template>
<script>

import Input_st_name_ui from "@/components/ui_search/input_st_name_ui"; 
import Input_tc_name_ui from "@/components/ui_search/input_tc_name_ui"; 
import Select_sex_ui from "@/components/ui_search/select_sex_ui";
import Select_class_ui from "@/components/ui_search/select_class_ui";
import Select_grade_ui from "@/components/ui_search/select_grade_ui";
import Autocomplete_school_ui from "@/components/ui_search/autocomplete_school_ui";
import Select_subject_ui from "@/components/ui_search/select_subject_ui";
import Input_test_ui from "@/components/ui_search/input_test_ui";
import Pagination_paging_ui from "@/components/ui_search/pagination_paging_ui";
import Table_table_ui from "@/components/ui_search/table_table_ui";
//vuex组件
import {mapGetters,mapMutations,mapActions,mapState} from 'vuex';
import {studentRes} from '@/static/js/res_data.js'

export default {
  components: {
    Input_st_name_ui,
    Input_tc_name_ui,
    Select_sex_ui,
    Select_class_ui,
    Select_grade_ui,
    Autocomplete_school_ui,
    Select_subject_ui,
    Input_test_ui,
    Pagination_paging_ui,
    Table_table_ui,
  },
  data(){
    return{
      tableLable:[
        {prop:'school',label:'学校'},
        {prop:'grade',label:'年级'},
        {prop:'classes',label:'班级'},
        {prop:'subject',label:'科目'},
        {prop:'tc_name',label:'教师姓名'},
        {prop:'test',label:'成绩'},
        {prop:'st_name',label:'学生姓名'},
        {prop:'sex',label:'性别'},
      ],
      tableData:[
        {
          school:'',
          grade:'',
          classes:'',
          subject:'',
          tc_name:'',
          test:'',
          st_name:'',
          sex:''
        }
      ],
    }
  },
  computed: {
    //使用vuex的getters
    ...mapGetters({table_st_seach:'studentModule/table_st_seach'})
  },
  watch: {
    tableData(){
      this.setTable_tableData(this.tableData)
    }
  },
  mounted() {
    //表头初始化
    this.setTable_tableLable(this.tableLable);
    this.setTable_show(false)
    //获取值
    this.getData();
  },

  beforeDestroy() {
    this.student_reset();
  },
  methods:{
    ...mapMutations({
      setTable_tableLable:'pubilcModule/setTable_tableLable',
      setTable_tableData:'pubilcModule/setTable_tableData',
      setTable_show:'pubilcModule/setTable_show',
      setPagination_total:'pubilcModule/setPagination_total',
      setPagination_pageNum:'pubilcModule/setPagination_pageNum',
    }),
    ...mapActions({
      student_reset:'studentModule/reset'
    }),
    //搜索
    submit(){
      //点击搜索初始化
      this.setPagination_pageNum(2);
      console.log(JSON.stringify(this.table_st_seach))
      this.$notify({
        title:'搜索发送给后端的查询数据！',
        message:JSON.stringify(this.table_st_seach),
        type:'success'
      });
    },
    //重置
    reset(){
      this.student_reset();
      console.log(JSON.stringify(this.table_st_seach))
      this.$notify({
        title:'重置发送给后端的查询数据！',
        message:JSON.stringify(this.table_st_seach),
        type:'success'
      })
    },
    //数据查询获取
    getData(){
      //模仿axiox获取数据后赋值
      if(studentRes.code == 200){
        this.tableData = studentRes.data;
        this.setPagination_total(studentRes.total);
        this.$message.success(studentRes.msg);
      }
    },
  }
};
</script>

<style scoped lang="scss">


</style>
